<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="1100px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    append-to-body
  >
    <!-- 项目计划信息 -->
    <projectplanbase-info :project-plan-base-information="projectPlanBaseInformation" />
    <!-- 项目计划信息 -->
    <div class="DescriptionTitle">
      {{ createFlag ? $t("projectPlanInfoCreateTitle") : $t("projectPlanInfoUpdateTitle") }} </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('projectType')" prop="project_type">
            <el-radio-group v-model="form.project_type" style="padding-top: 1.3%; padding-left: 1.5%;">
              <el-radio label="现有维护服务">现有维护服务</el-radio>
              <el-radio label="合作方支援服务">合作方支援服务</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectScope')" prop="scope">
            <el-select v-model="form.scope" clearable multiple allow-create filterable :placeholder="$t('inputprojectScope')">
              <el-option v-for="status in scopeOptions" :key="status.value" :label="status.label" :value="status.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('objectProduct')" prop="obj_product">
            <el-select v-model="form.obj_product" clearable multiple allow-create filterable :placeholder="$t('inputObjectProduct')">
              <el-option v-for="status in objProductOptions" :key="status.value" :label="status.label" :value="status.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('internalTarget')" prop="internal_target">
            <el-input v-model="form.internal_target" type="textarea" autosize maxlength="100" show-word-limit :placeholder="$t('inputinternalTarget')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('customerTarget')" prop="customer_target">
            <el-input v-model="form.customer_target" type="textarea" autosize maxlength="100" show-word-limit :placeholder="$t('inputcustomerTarget')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('responsibility')" prop="responsibility">
            <el-input v-model="form.responsibility" type="textarea" autosize maxlength="100" show-word-limit :placeholder="$t('inputresponsibility')" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('partnerCompany')" prop="partner_company">
            <el-input v-model="form.partner_company" type="textarea" autosize maxlength="50" show-word-limit :placeholder="$t('inputpartnerCompany')" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="createFlag" type="primary" @click="submitForm">{{
        $t('create')
      }}</el-button>
      <el-button v-else type="primary" @click="submitForm">{{
        $t('update')
      }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getProjectPlanInfoListApi, createProjectPlanInfoApi, updateProjectPlanInfoApi } from '../api/projectplaninfo.api';
import projectplanbaseInfo from '../../projectplanbase/components/projectplanbase-info.vue';
import { getDropDownCodeTableListApi } from '@/api/common/common'

export default {
  components: { projectplanbaseInfo },
  data() {
    return {
      title: undefined,
      openSheet: false,
      createFlag: true,
      infoId: undefined,
      projectPlanBaseInformation: {},
      infolist: [],
      form: {
        projectPlanFK: undefined,
        project_type: undefined,
        scope: undefined,
        obj_product: undefined,
        internal_target: undefined,
        customer_target: undefined,
        responsibility: undefined,
        partner_company: undefined
      },
      error: {
        projectPlanFK: undefined,
        project_type: undefined,
        scope: undefined,
        obj_product: undefined,
        internal_target: undefined,
        customer_target: undefined,
        responsibility: undefined,
        partner_company: undefined
      },
      queryparams: {
        projectPlanFK: undefined
      },
      scopeOptions: [],
      objProductOptions: [],
      rules: {
      }
    };
  },
  computed: {
  },
  methods: {
    async openSheetDialog(data) {
      this.openSheet = !this.openSheet;
      this.reset();
      this.infoId = data.id;
      this.form.projectPlanFK = data.id;
      this.initialize()
      this.projectPlanBaseInformation = data;
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    reset() {
      this.resetForm('form');
      this.resetJsonObject(this.form)
    },
    initialize() {
      this.getProjectPlanInfoList()
      this.handleScopeOptions()
      this.handleObjOptions()
    },
    // 获取Scop下拉选项
    async handleScopeOptions() {
      var params = { 'model': 'ProjectInfoModel', 'field': 'scope_option' }
      var resp = await getDropDownCodeTableListApi(params)
      if (resp.success) {
        this.scopeOptions = resp.data;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    // 获取Obj下拉选项
    async handleObjOptions() {
      var params = { 'model': 'ProjectInfoModel', 'field': 'obj_option' }
      var resp = await getDropDownCodeTableListApi(params)
      if (resp.success) {
        this.objProductOptions = resp.data;
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    // 获取项目计划基础信息表
    async getProjectPlanInfoList() {
      this.loading = true
      this.queryparams.projectPlanFK = this.infoId
      var resp = await getProjectPlanInfoListApi({ ...this.queryparams })
      if (resp.success && resp.data.results.length > 0) {
        this.createFlag = false
        this.title = this.$t('projectPlanInfoUpdateTitle');
        this.infolist = resp.data.results[0] // 一个项目计划只能对应一条基础信息
        this.infolist.obj_product = this.infolist.obj_product.split(',') // 将字符串转为数组
        this.infolist.scope = this.infolist.scope.split(',')
        this.form = { ...this.infolist } // 将获取的数据赋值给form
      } else {
        this.createFlag = true
        this.title = this.$t('projectPlanInfoCreateTitle');
        this.infolist = []
      }
      this.loading = false
    },
    submitForm: function() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.resetJsonObject(this.error)
          this.form.obj_product = this.form.obj_product.join(',') // 将数组转为字符串
          this.form.scope = this.form.scope.join(',')
          var resp;
          if (this.createFlag) {
            resp = await createProjectPlanInfoApi(this.form);
          } else {
            resp = await updateProjectPlanInfoApi(this.form.id, this.form);
          }
          if (resp.success) {
            this.$emit('refreshList');
            this.cancel();
            if (this.createFlag) {
              this.targaMessage(
                this.$t('createSuccess', {
                  title: this.$t('projectType'),
                  value: this.form.project_type
                })
              );
            } else {
              this.targaMessage(
                this.$t('updateSuccess', {
                  title: this.$t('projectType'),
                  value: this.form.project_type
                })
              );
            }
          } else {
            if (typeof resp.msg === 'object') {
              this.error = resp.msg;
            } else {
              this.targaMessageBox(this, resp.msg);
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 使用了单选框，在选择时会提示aria-hidden的错误，手动调整样式解决该问题 */
::v-deep input[aria-hidden="true"] {
    display: none !important;
}
::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    box-shadow: none !important;
}
/* 调整输入框的字数统计的样式，让其向下、向右移动，不会遮挡输入的文字 */
::v-deep .el-textarea .el-input__count {
  font-size: 10px;
  bottom: -6px;
  right: 2px;
}
@import "~@/views/projectbase/projectcss/project.css";
</style>
